<template>
  <div class="page-edit-container">
    <AForm class="content-form" ref="formRef" :model="formState" @finish="onFinish">
      <AFormItem label="公告标题" name="noticeTitle" :rules="noticeRules.noticeTitle">
        <AInput v-model:value="formState.noticeTitle" placeholder="请输入公告标题" :maxlength="20"></AInput>
      </AFormItem>
      <div class="form-group">
        <AFormItem label="公告类型" name="noticeType">
          <ARadioGroup v-model:value="formState.noticeType" name="radioGroup">
            <ARadio :value="0">通知</ARadio>
            <ARadio :value="1">公告</ARadio>
          </ARadioGroup>
        </AFormItem>
        <AFormItem label="推送用户" name="pushRange">
          <ARadioGroup v-model:value="formState.pushRange" name="radioGroup">
            <ARadio :value="0">全部</ARadio>
            <ARadio :value="1">自定义</ARadio>
          </ARadioGroup>
        </AFormItem>
        <AFormItem label="公告状态" name="status">
          <ARadioGroup v-model:value="formState.status" name="radioGroup">
            <ARadio :value="0">正常</ARadio>
            <ARadio :value="1">停用</ARadio>
          </ARadioGroup>
        </AFormItem>
      </div>
      <AFormItem
        name="userIds"
        v-show="!!formState.pushRange"
        :rules="[{ trigger: 'blur', required: !!formState.pushRange, message: '请添加推送用户' }]"
      >
        <UserSelect v-model:value="formState.userIds" :api="fetchGetNoticePushUserList"></UserSelect>
      </AFormItem>
      <AFormItem name="noticeContent" :rules="noticeRules.noticeContent">
        <REditor v-model:value="formState.noticeContent" placeholder="请输入内容"></REditor>
      </AFormItem>
      <AFormItem>
        <div style="width: 100%; display: flex; justify-content: center; gap: 8px">
          <APopconfirm title="您是否确定取消添加信息?" ok-text="是" cancel-text="否" @confirm="() => navigate(-1)">
            <AButton>取消</AButton>
          </APopconfirm>
          <APopconfirm
            title="您是否确定取消添加信息?"
            ok-text="是"
            cancel-text="否"
            @confirm="() => formRef?.resetFields()"
          >
            <AButton>重置</AButton>
          </APopconfirm>
          <AButton type="primary" html-type="submit" :loading="loading">提交</AButton>
        </div>
      </AFormItem>
    </AForm>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { REditor } from '@/components/custom';
import { noticeRules } from '@/constants/rules';
import { UserSelect } from '@/views/system/user/modules';

import { fetchAddNotice, fetchGetNoticePushUserList } from '@/api/system/notice/index.js';
import { useFetch, useNavigate } from '@/hooks/index.js';

defineOptions({
  inheritAttrs: false
});

const initValues = {
  noticeTitle: '',
  noticeType: 0,
  pushRange: 0,
  status: 0,
  content: ''
};
const formRef = ref();
const formState = ref(initValues);

const navigate = useNavigate();

const { spinning: loading, onFetch } = useFetch(fetchAddNotice, false);

const onFinish = async (values) => {
  if (values.pushRange === 0) {
    Reflect.deleteProperty(values, 'userIds');
  }

  await onFetch(values);
  navigate(-1);
};
</script>

<style lang="scss" scoped>
.page-edit-container {
  width: 100%;
  min-height: 100%;
  padding: 24px;
  background-color: var(--bg-color);
  position: relative;

  .content-form {
    :deep(.form-group) {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    :deep(.ant-form-item) {
      .ant-form-item-label {
        width: 80px;
      }

      .ant-input-number {
        width: 100%;
      }
    }
  }
}
</style>
